
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
    <div class="header">
        <nav class="navbar">
            <div class="nav_left fl">
                <span>早上好！</span>
                <span>找的中意的书了吗？</span>
                <span class="nav_span">
                    <a href="">请登录</a>
                    <a href="">免费注册</a>
                </span>
            </div>
            <div class="nav_right fr">
                <ul>
                    <li><a href="#">我的学习</a></li>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="itme_li">
                        <a href="#">客户服务</a>
                        <ul class="itme_li_dis">
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">新闻公告</a></li>
                        </ul>
                    </li>
                    <li style="border-right: none;" class="qr_itme_li">
                        <a href="#">手机新华</a>
                        <div class="qr_itme_img">
                            <b></b>
                            <img src="https://img4.xinhuashudian.com/images/2018/08/20/2f411ec2-e95b-41c1-8fb5-ef47fd8c5642.png?x-oss-process=image/format,webp" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- 搜索栏 -->
    <div class="big_search">
        <div class="search">
            <a href="#" class="fl search_a">
                <img src="https://img9.xinhuashudian.com/images/2018/07/21/5787d6ac-4e5a-4741-935e-af74953779a7.png?x-oss-process=image/format,webp" alt="">
            </a>
            <div class="subnav fl">
                <input type="text" name="keyword" class="subnav_input" placeholder="论中国共产党历史" value="" autocomplete="off">
                <span>
                    <button class="subnav_btn" type="submit">
                        <i class="iconfont">&#xe662;</i>
                    </button>   
                </span>
                <div class="search_hot">
                    <ul>
                        <li><span>热门搜索</span></li>
                        <li><a href="#">习近平扶贫故事</a></li>
                        <li><a href="#">北京冬奥会</a></li>
                        <li><a href="#">日历2021</a></li>
                        <li><a href="#">诗词名句</a></li>
                        <li><a href="#">新华英雄笔</a></li>
                    </ul>
                </div>
            </div>
            <div class="big_shopping fl">
                <div class="shopping">
                    <a href="./cart.html">
                        <i class="iconfont icon">&#xe628;</i>
                        购物车
                        <span class="shopping_num">0</span>
                        件
                        <i class="iconfont">&#xe61c;</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <h2><a href="./index.html">去首页</a></h2>
    <!-- 商品分类 -->
    <div class="categorise">
        <div class="categorise_cont auto">
            <div class="categorise_nav fl">
                <a href="#">
                    <i class="iconfont">&#xe601;</i>
                    <span>全部商品分类</span>
                </a>
            </div>
            <ul class="categorise_menu fl">
                <li><a href="#">商城首页</a></li>
                <li><a href="#">主题出版</a></li>
                <li><a href="#">中版书房</a></li>
                <li><a href="#">新华优选</a></li>
                <li><a href="#">新华定制</a></li>
                <li><a href="#">新华惠农</a></li>
                <li><a href="#">新华直播</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">新时代 · 新经典</a></li>
            </ul>
        </div>
    </div>
    <div class="comm_title auto">
        <span>你好，科学！（全6册）</span>
    </div>
    <!-- 商品详情 -->
    <div class="Details auto clearfix">
        <div class="smlimg">
            <div class="smlbox">
                <img src="" alt="">
                <span></span>
            </div>
            <div style="width: 375px; overflow: hidden; padding-left: 4px;">
                <ul class="magnifier">
                    
                </ul>
            </div>
            <div class="btns">
                <input type="button" class="iconfont" value="&#xe60e;" id="left">
                <input type="button" class="iconfont" value="&#xe62e;" id="right">
            </div>
        </div>
        <div class="bigimg">
            <img src="" alt="">
        </div>
        <div class="comm_Details">
            <div class="comm_Details_title">
                <h6 class="title_text">你好，科学！（全6册）</h6>
            </div>
            <div class="comm_Details_cont">
                <div class="Details_cont_head">
                    <i class="iconfont">&#xe600;</i>
                    <span>直降</span>
                    <b>距离活动结束 86天</b>
                </div>
                <div class="comm_Details_price">
                    <label>活动价</label>
                    <span class="price"></span>
                    <span class="_price"></span>
                </div>
                <div class="Discount">
                    <b for="">优惠券</b>
                    <span>满5-5</span>
                    <span class="iconfont">更多优惠券 &#xe62f;</span>
                </div>
            </div>
            <div class="area">
                <ul>
                    <li class="area_li">
                        <label for="" class="area_left">配送至</label>
                        <div class="area_cen">
                            <span>上海市 &nbsp; </span>
                            <i class="iconfont">&#xe62f;</i>
                            <ul>
                                <li class="active">北京</li>
                                <li>天津</li>
                                <li>河北省</li>
                                <li>山西省</li>
                                <li>山东省</li>
                                <li>上海市</li>
                            </ul>
                        </div>
                        <label for="" class="area_right">该地区有货</label>
                    </li>
                </ul>
            </div>
            <div class="numBtns">
               <ul>
                   <li class="Quantity">
                    <label for="">数量</label>
                    <span class="Less fl">-</span>
                    <span class="num fl">1</span>
                    <span class="push fl">+</span>
                   </li>
                   <li class="purchase">
                      <a href="./cart.html" ><button class="join">加入购物车</button></a>
                      <!-- <button class="join">加入购物车</button> -->
                      <button class="buy">立即购买</button> 
                      <span class="join_span">请先登录</span>
                      <span class="buy_span">商品库存不足，请选择其他商品</span>
                   </li>
               </ul>
            </div>
        </div>
    </div>
</body>
<script src="./js/detail.js"></script>
</html>